<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="a"></div>
    <hr>
    <div id="b"></div>
    <hr>
    <div id="c"></div>
    <hr>
    <template id="app">
        <div>
            <p @click="print()">{{msg}}</p>
            <input type="text" v-model="msg">
        </div>
    </template>
</body>
<script>
    var Profile=Vue.extend({
        template:"#app",
        // template:"<h2 @click='print()'>{{msg}}</h2>",
        data:function(){
            return {
                msg:"蔡徐坤"
            }
        },
        methods:{
            print(){
                console.log("print方法");
            }
        },
        beforeMount(){
            console.log("beforeMount");
        }
    });
    var vm1=new Profile();
    vm1.$mount("#a");
    var vm2=new Profile();
    vm2.$mount("#b");
    var vm3=new Profile();
    vm3.$mount("#c");
</script>
</html>